<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-class-name="'headerBg'"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column
        prop="campusName"
        label="社团名字"
        width="140"
      ></el-table-column>
      <el-table-column prop="campusScale" label="社团规模（人）">
      </el-table-column>
      <el-table-column
        prop="campusInfo"
        label="社团简介"
        width="120"
      ></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="masterName" label="提交者"></el-table-column>
      <el-table-column
        v-if="user.role === 'ROLE_SIMPLE'"
        label="操作"
        width="500"
        align="center"
      >
        <template slot-scope="scope">
          <el-popconfirm
            class="ml-5"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="el-icon-info"
            icon-color="red"
            title="您确定取消申请成立此社团吗？"
            @confirm="cancel(scope.row.id, user.id)"
          >
            <el-button
              type="warning"
              slot="reference"
              v-if="scope.row.status === 0"
              >取消申请 <i class="el-icon-remove-outline"></i
            ></el-button>
          </el-popconfirm>
          <div type="warning" slot="reference" v-if="scope.row.status === 2">该审核未通过</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { serverIp } from "../../../public/config";

export default {
  name: "User",
  data() {
    return {
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      serverIp: serverIp,
      tableData: [],
      total: 0,
      campusName: "",
      form: {},
      multipleSelection: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    cancel(campusId, userId) {
      console.log("campusId:" + campusId);
      console.log("userId:" + userId);
      this.request
        .post("/campus/cancelcreate?campusId=" + campusId + "&userId=" + userId)
        .then((res) => {
          this.$message.success("取消申请成立社团成功");
          this.load();
        });
    },

    load() {
      this.request
        .get("/campus/findmycc?userid=" + this.user.id)
        .then((res) => {
          this.tableData = res.data;
          this.total = res.data.total;
        });
    },

    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>


<style>
.headerBg {
  background: #eee !important;
}
</style>
